<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用flvjs预览摄像头问题</title>
</head>
<body>
    <div>
        <!--切换浏览器标签页时 摄像头暂停取流问题？ -->
        <!-- 解决：监听标签页切换时 使用video中的buffered.end(0) 赋值给video.currentTime -->
        <!-- 这里是在 vue中开发的 做了兼容处理 -->
        mounted(){
            var hidden;
            var visibilityChange;
            var visible;
            var state;
            if (typeof document.hidden !== "undefined") {
                hidden = "hidden";
                visibilityChange = "visibilitychange";
                visible = "visible";
                state = 'visibilityState';
            } else if (typeof document.mozHidden !== "undefined") {
                hidden = "mozHidden";
                visibilityChange = "mozvisibilitychange";
                visible = "mozVisibilityState";
                state = 'mozVisibilityState';
            } else if (typeof document.msHidden !== "undefined") {
                hidden = "msHidden";
                visibilityChange = "msvisibilitychange";
                visible = "msVisibilityState";
                state = 'msVisibilityState';
            } else if (typeof document.webkitHidden !== "undefined") {
                hidden = "webkitHidden";
                visibilityChange = "webkitvisibilitychange";
                visible = "webkitVisibilityState";
            }
            //标签页切换媒体播放时间重置
            document.addEventListener(visibilityChange, function() {
                if(document[state] === visible) {
                    let videoEleObj = document.getElementsByTagName('video')
                    for(let video in videoEleObj){
                        let buffered = videoEleObj[video].buffered;
                        if(buffered && buffered.length > 0){
                            videoEleObj[video].currentTime = buffered.end(0) - 0.5
                        }
                    }
                }else if(document[state] === hidden){
    
                }
            },false)
        },
    </div>
</body>
</html>